<template>
	<view class="member">
		<image class="headimg" src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131083855820741.png"
			mode="widthFix"></image>
		<view class="userInfo">
			<view class="info">
				<image :src="userInfo.avatar"></image>
				<view class="desc">
					<view class="name">{{userInfo.nickname}}，上午好！</view>
					<view class="level">{{vip.now_level}}</view>
				</view>
			</view>
			<view class="btn">等级说明</view>
		</view>
		<image class="vipimg" src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131083818268614.png">
		</image>
		<view class="content">
			<view class="title">
				<image class="titleicon"
					src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131085004852166.png"></image>会员充值
				<image class="titleicon"
					src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131085004852166.png"></image>
			</view>
			<view class="titletip">开启会员认证畅想一下权益</view>
			<view class="list">
				<view class="li">
					<view class="quan">券后减￥82</view>
					<view class="typename">会员月卡</view>
					<view class="price">
						<view class="unit">￥</view>199
					</view>
					<view class="jian">立减1999元</view>
					<view class="f-jian">立减1999元</view>
				</view>
				<view class="li">
					<view class="quan">券后减￥82</view>
					<view class="typename">会员月卡</view>
					<view class="price">
						<view class="unit">￥</view>199
					</view>
					<view class="jian">立减1999元</view>
					<view class="f-jian">立减1999元</view>
				</view>
				<view class="li">
					<view class="quan">券后减￥82</view>
					<view class="typename">会员月卡</view>
					<view class="price">
						<view class="unit">￥</view>199
					</view>
					<view class="jian">立减1999元</view>
					<view class="f-jian">立减1999元</view>
				</view>
			</view>
			<view class="paybtn" @click="payVip">立即开通</view>
			<view class="mytitle">
				<image class="titleicon"
					src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131085004852166.png"></image>
				我的会员权益
				<image class="titleicon"
					src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131085004852166.png"></image>
			</view>
			<view class="mytip">开启会员认证畅想一下权益</view>
			<view class="myul">
				<view class="myol">
					<image class="olimg"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/2024013108505222562.png"></image>
					<view class="olname">专属理财</view>
				</view>
				<view class="myol">
					<image class="olimg"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131085111818469.png"></image>
					<view class="olname">专项活动</view>
				</view>
				<view class="myol">
					<image class="olimg"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131085125435152.png"></image>
					<view class="olname">极速审核</view>
				</view>
				<view class="myol">
					<image class="olimg"
						src="https://video.file.zhuochengyun.com/bwc/uploads/20240131/20240131085137184599.png"></image>
					<view class="olname">专属客服</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getVipInfo,
		vipbuy
	} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				vip: {
					buy_tip: "立即开通",
					is_vip: 0,
					now_level: "你还不是会员"
				},
				info: {},
				userInfo: {}
			}
		},
		onLoad() {
			this.getVipData()
		},
		methods: {
			payVip() {
				uni.showLoading({
					mask: true
				})
				vipbuy({
					type: this.info.type
				}).then(res => {
					if (res.code == 1) {
						uni.requestPayment({
							...res.data.wx,
							success(res) {
								uni.hideLoading({
									mask: true
								})
								uni.showToast({
									title: '支付成功',
									duration: 2000
								})
								setTimeout(() => {
									uni.navigateTo({
										url: 'pages/member/success'
									})
								}, 2000)
							},
							fail(err) {
								uni.hideLoading({
									mask: true
								})
								console.log(err, '支付--fail');
								if (err.errMsg === 'requestPayment:fail cancel') {
									uni.showToast({
										title: '支付已取消',
										icon: 'none'
									});

								}
							}
						});
					}
				})
			},
			//获取数据
			getVipData() {
				getVipInfo({}).then((res) => {
					if (res.code == 1) {
						this.vip = res.data.vip;
						this.info = res.data.info;
						this.userInfo = res.data.user;
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 0
							});
						}, 1000)
					}
				}).catch(err => {
					console.log(err)
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.member {
		position: relative;

		.headimg {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
		}

		.userInfo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			z-index: 2;
			padding: 200rpx 100rpx 18rpx 60rpx;
			box-sizing: border-box;

			.info {
				display: flex;
				align-items: center;

				image {
					width: 65rpx;
					height: 65rpx;
					border-radius: 50%;
					border: 3rpx solid #435C9B;
				}

				.desc {
					margin-left: 10rpx;

					.name {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #fff;

					}

					.level {
						font-size: 16rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFDBB4;
						margin-top: 10rpx;
					}
				}
			}

			.btn {
				font-size: 23rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #fff;
			}
		}

		.vipimg {
			width: 645rpx;
			height: 165rpx;
			position: relative;
			z-index: 2;
			margin-left: 54rpx;
		}

		.content {
			width: 716rpx;
			height: calc(100vh - 495rpx);
			background: #fff;
			border-radius: 37rpx;
			border: 17rpx solid #f5f5f5;
			position: relative;
			z-index: 2;
			margin-top: -30rpx;
			padding-top: 35rpx;

			.title {
				width: 100%;
				height: 33rpx;
				font-size: 33rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #332114;
				line-height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.titleicon {
					width: 41rpx;
					height: 23rpx;
					margin: 0 16rpx;
				}
			}

			.titletip {
				font-size: 21rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #646464;
				margin: 21rpx auto 0;
				text-align: center;
			}

			.list {
				width: 100%;
				padding: 43rpx 47rpx 46rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;

				.li {
					width: 185rpx;
					height: 243rpx;
					background: #FFFFFF;
					border: 1px solid #DCDCDC;
					border-radius: 10rpx;
					position: relative;
					padding-top: 54rpx;
					box-sizing: border-box;

					.quan {
						width: 136rpx;
						height: 41rpx;
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 41rpx;
						text-align: center;
						background: linear-gradient(-90deg, #FD725E, #FD3840);
						border-radius: 22rpx 4rpx 22rpx 4rpx;
						position: absolute;
						left: 0;
						top: -15rpx;
					}

					.typename {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #78411A;
						text-align: center;

					}

					.price {
						font-size: 46rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #F96505;
						margin-top: 11rpx;
						display: flex;
						align-items: flex-end;
						justify-content: center;

						.unit {
							font-size: 30rpx;
							line-height: 45rpx;
						}
					}

					.jian {
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 400;
						text-decoration: line-through;
						color: #808080;
						opacity: 0.64;
						text-align: center;
					}

					.f-jian {
						width: 100%;
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #fff;
						background-color: #fffaef;
						background: linear-gradient(to right, #fcb143, #fe6a06);
						border-radius: 0 0 10rpx 10rpx;
						padding: 9rpx 0 11rpx;
						text-align: center;
						position: absolute;
						left: 0;
						bottom: 0;
					}

				}
			}

			.paybtn {
				width: 618rpx;
				height: 80rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #311C0D;
				line-height: 80rpx;
				text-align: center;
				background: linear-gradient(0deg, #F7D398, #F3D6A7, #E2BA78);
				border-radius: 40rpx;
				margin: 0 auto 74rpx;
			}

			.mytitle {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 33rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #332114;
				margin-bottom: 21rpx;

				.titleicon {
					width: 41rpx;
					height: 23rpx;
					margin: 0 16rpx;
				}
			}

			.mytip {
				font-size: 21rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #646464;
				text-align: center;
				margin-bottom: 38rpx;
			}

			.myul {
				width: 660rpx;
				background: #FFF4E2;
				border-radius: 37rpx;
				padding: 20rpx 40rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: auto;

				.myol {
					.olimg {
						width: 89rpx;
						height: 89rpx;
						margin-bottom: 10rpx;
					}

					.olname {
						width: 86rpx;
						font-size: 21rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #535353;
					}
				}
			}
		}


	}
</style>